import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import { request } from "../../utils";

export interface ClassifyListItem {
  title: string;
  id: string;
  props: {
    banner: string[];
    subList: {
      title: string;
      url: string;
      id: string;
    }[];
  };
}

interface ClassifyState {
  loading: boolean;
  error: null | string;
  classifyList: ClassifyListItem[];
}

const initialState: ClassifyState = {
  loading: true,
  error: null,
  classifyList: [],
};

export const asyncFetchList = createAsyncThunk(
  "classify/asyncFetchList",
  async () => {
    const resp = await request.get("/api/tab/list");
    return resp.data.data;
  }
);

const classifySlice = createSlice({
  name: "classify",
  initialState,
  reducers: {},
  extraReducers: {
    [asyncFetchList.pending.type](state) {
      state.loading = true;
    },
    [asyncFetchList.fulfilled.type](
      state,
      action: PayloadAction<ClassifyListItem[]>
    ) {
      state.loading = false;
      state.classifyList = action.payload;
    },
  },
});

export default classifySlice;
